<template>
  <div v-loading="loading" class="leagueData">
    <el-row :gutter="20" class="statistics">
      <el-col :span="3" class="statistics_label statistics_title">
        联赛数据统计：
      </el-col>
      <el-col :span="20">
        <el-row :gutter="20" style="text-align:center;">
          <el-col :span="4">
            <div class="statistics_title">已有分站赛</div>
            <div class="statistics_nums">{{ tableData.isolateCompetitionCount }}</div>
            <div>站</div>
          </el-col>
          <el-col :span="4">
            <div class="statistics_title">联赛参赛单位</div>
            <div class="statistics_nums">{{ tableData.delegationCount }}</div>
            <div>个</div>
          </el-col>
          <el-col :span="4">
            <div class="statistics_title">联赛参赛人数</div>
            <div class="statistics_nums">{{ tableData.athleteCount }}</div>
            <div>位</div>
          </el-col>
          <el-col :span="4">
            <div class="statistics_title">联赛参赛人次</div>
            <div class="statistics_nums">{{ tableData.athleteCategoryCount }}</div>
            <div>次</div>
          </el-col>
          <el-col :span="6">
            <div class="statistics_title">缴费总额</div>
            <div class="statistics_nums">{{ formatMoney(tableData.moneyCount) }}</div>
            <div>元</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="20" style="text-align: right;margin-top:20px">
        <el-button type="text" size="mini" style="font-size:16px" @click="changeJumpRoute('LeagueGameDataDetails')">查看详情>></el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="statistics" style="margin-top:30px">
      <el-col :span="3" class="statistics_label" style="margin-top:10px">
        联赛数据榜单：
      </el-col>
      <el-col :span="20">
        <el-button v-for="item in optList" :key="item.code" type="primary" :disabled="item.disabled" size="medium" style="margin-right:15px" @click="changeJumpRoute(item.code)">{{ item.name }}</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="statistics" style="margin-top:50px">
      <el-col :span="3" class="statistics_label" style="margin-top:10px">
        联赛决赛名单：
      </el-col>
      <el-col :span="20">
        <el-button type="primary" size="medium" style="margin-right:20px" @click="changeJumpRoute('LeagueFinalRanking')">查看名单</el-button>
        <span class="final_text" style="margin-right:15px">决赛名单规则</span>
        <span class="final_text" style="margin-right:15px">{{ entryFieldsDto.leagueFinalPromotionType ? entryFieldsDto.leagueFinalPromotionType.name : '' }}</span>
        <span v-if="entryFieldsDto.leagueFinalPromotionTypeCode === 'RANK_BY_EVENTS' || entryFieldsDto.leagueFinalPromotionTypeCode === 'RANK_BY_LEAGUE_POINTS'" class="final_text" style="color:red">
          <span v-if="entryFieldsDto.leagueFinalPromotionValue"> {{ `前${entryFieldsDto.leagueFinalPromotionValue}名` }}</span>
          <el-link v-else type="danger" style="font-size:16px" @click="changeJumpRoute('LeagueGameEdit')">请前往【赛事编辑-赛事基数设置】设置</el-link>
        </span>
        <span v-if="entryFieldsDto.leagueFinalPromotionTypeCode === '' || entryFieldsDto.leagueFinalPromotionTypeCode === null" class="final_text" style="color:red">
          <el-link type="danger" style="font-size:16px" @click="changeJumpRoute('LeagueGameEdit')">请前往【赛事编辑-赛事基数设置】设置</el-link>
        </span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {
  api_GET_EventsManagementCompetitionRequestCompetitionLeagueDataLeagueCompetitionId, api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId
} from '@/extend/api/gameswaggerApi/app.js';
import { SiSTKWEventsManagementCompetitionSettingWithEntryFieldsDto, SiSTKWEventsManagementCompetitionLeagueDataDto } from '@/lib/form/game/swaggerForm';

export default {
  name: 'DataManage',
  data() {
    return {
      optList: [
        {
          code: 'LeagueTable',
          name: '积分榜',
          disabled: false
        },
        // {
        //   code: 'LeagueOrganizationsRanking',
        //   name: '参赛机构',
        //   disabled: false
        // },
        // {
        //   code: 'LeagueParticipants',
        //   name: '参赛人员',
        //   disabled: false
        // },
        // {
        //   code: 'LeaguePopularity',
        //   name: '人气榜',
        //   disabled: true
        // },
        {
          code: 'LeagueArea',
          name: '赛区榜',
          disabled: false
        }
      ],
      loading: false,
      tableData: new SiSTKWEventsManagementCompetitionLeagueDataDto(),
      entryFieldsDto: new SiSTKWEventsManagementCompetitionSettingWithEntryFieldsDto(),
      gameId: ''
    };
  },
  created() {
    this.gameId = this.$route.params.parentId;
    localStorage.removeItem('leagueType');
    this.getData();
    this.getGameSetting();
  },
  methods: {
    // 获取数据管理首页数据
    getData() {
      var _this = this;
      _this.loading = true;
      api_GET_EventsManagementCompetitionRequestCompetitionLeagueDataLeagueCompetitionId(this.gameId).then(res => {
        this.loading = false;
        this.tableData = res || {};
        console.log(this.tableData);
      }, (error) => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 根据赛事id获取赛事配置
    getGameSetting() {
      api_GET_EventsManagementCompetitionSettingWithCompetitionIdCompetitionId(this.gameId, { IncludeLeagueFinalPromotionType: true }).then(res => {
        this.loading = false;
        this.entryFieldsDto = res || {};
        console.log(this.entryFieldsDto);
      }, (error) => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    changeJumpRoute (code) {
      const { query } = this.$route;
      // query.activeStep = 2;
      this.$router.push({
        name: code,
        query: query
      });
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  .statistics_title{
    line-height: 50px;
  }
  .statistics_label{
    text-align: right;
    font-weight: bold;
  }
  .statistics_nums{
    font-size: 40px;
    color: rgb(58, 128, 236);
    margin-bottom: 10px;
  }
</style>
